4 


Как выстроить удобные = 
процессы в работе с 
монорепозиторием 


Андрей Кочеров (Яндекс Такси) 


то: 
Ш Ш 2» | 
~ 


Команда 


разрабатывает веб-приложения для таксопарков, 
коллег в Яндекс, внешних сотрудников и исполнителей 


выросла от 5 человек, работающих над одним проектом 
до 17 человек и 9 активных проектов 

с общими библиотеками и инструментами 

в едином репозитории 
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Проекты 


один проект разделился на два 
с общей бизнес-логикой 


появились новые проекты 
с общими компонентами, системой локализации, 


инструментами разработки и деплоя 


обобщение в ходе разработки новых проектов 
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Цель 
относительно небольшой командой 


эффективно разрабатывать несколько 
проектов одновременно 
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А для этого нужно 


уметь переключаться 
между проектами 


легко переиспользовать решения 
и не замедляться 
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TBD 
основные 
принципы 


Үагп Modern 
воркспейсы 
и оркестрация 


VSCode 
окружение 
разработки 


Vite 
aeBcepBep 
и сборка 


Prettier 
форматирование 


TypeScript 
Intellisense & проверка типов 


ESLint 
ошибки логики 


Jest & Vitest 
тестирование 
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Ө 


Trunk Based Development 


trunkbaseddevelopment.com 
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Trunk 


общая для всех и единственная 
долгоживущая ветка 


Release 12.1 Release 12.2 


гэг 


Developers доп'ї commit 
to release branches 


4 \ | ! \ 


| Фе | | : | peveiopement | Бе. Trunk-Based Development at scale is best done with short-lived feature branches: опе person 
| а over а couple of days (max) and flowing through Pull-Request style code-review & build 
automation before “integrating” (merging) into the trunk (or master) 
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Маленькие и частые РК 


достаточно маленькие, чтобы 

поместиться в голову ревьювера, 

и достаточно сфокусированные, чтобы можно было 
понять происходящее из описания 


получаем быстрое и качественное ревью 
и минимальное отставание от транка 
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Trunk готов к релизу 


новый код и значительные изменения 
скрыты за релизными флагами 


флаги включаются в production по готовности 
уже после попадания кода в транк 
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зависимости по исходному коду 


вместо публикации пакета в NPM, 
используем код в транке 


облегчаем разработку и использование 
общих решений 
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Үагп 3 


м2+ это Үагп Modern 
v1 это Yarn Classic 
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Использование 


устанавливаєм любую версию глобально, 
а использоваться будет нужная версия, 
сохраненная рядом с кодом проекта 


$ уагп set version stable 


> умдддд: Retrieving https://repo.yarnpkg.com/3.2.4/packages/yarnpkg-cli/bin/yarn.js 
> умдддд: Saving the new release in .yarn/releases/yarn-3.2.4.cjs 
> \№0000: Done іп 15 4ms 
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Workspaces 


<repo>/package.json 
{ 


"name": "root", 
"workspaces": | 
"@*/*" 
] 
} 


Project 


~ Еу @fc2022 
м © app 
Г) package.json 
~ Е? library 
1) package.json 
[3 package.json 


Workspace 


м Б app 
Г) package.json 
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workspace: * 


4 
"пате": "@fc2022/app", 
"dependencies": 4 
"@fc2022/library": "могКзрасе:*" 
} 
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уагп workspace 


выполняет любую команду в контексте воркспейса 
из любой рабочей директории в проекте 


~/fc2022 У yarn workspace @#с2022/арр add react 
YNO000 : [ Resolution step 

ҮМ9900: ~ Completed 

YNO000 : [ Fetch step 

ҮМ9900: ~ Completed 

YNO000 : [ Link step 

ҮМ9900: ~ Completed 

YNO000: Done іп 05 Ц6т5 


У У У Ү Ү м м 
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уагп workspaces foreach 


выполняет любую команду 

в контексте каждого воркспейса 

с поддержкои фильтрации, 
последовательно или параллельно 
с учетом структуры зависимостеи 
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уагп workspaces foreach 


fc2022/@fc2022/app > yarn workspaces foreach \ 


у у Ү Ү ҮҮ м 


YNO000 : 
YNO000 : 
YNO000 : 
YNO000 : 
YNO000 : 
YNO000 : 
YNO000 : 


--exclude @fc2022/tools Ч 

--recursive Ч 

--topological \ 

--parallel ч 

--verbose Ч 

run build 
[@fc2022/apil: Process started 
[@fc2022/uil: Process started 
[@fc2022/apil: Process exited (exit code 0), completed in 05 4Oms 
[@fc2022/uil: Process exited (exit code 0), completed іп 05 35ms 
[@fc2022/app]: Process started 
[@fc2022/appl: Process exited (exit code 0), completed in 05 13ms 
Done in Os 58ms 
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Plugins 


добавляют новые команды с доступом к 
дереву зависимостей и структуре проекта 
и расширяют поведение Үагп 

с помощью XYKOB 


@yarnpkg/plugin-typescript 
Features 


" Automatically adds @types/ packages into your dependencies when you add а 


package that doesn't include its own types 
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Plugins: commands 


module .exports = 1 
name: ‘plugin-hello-world*, 
factory: require => { 
const {BaseCommand} = гедиіге( дбуагпркд/с1і/); 
class HelloWorldCommand extends BaseCommand 1 
static paths = [[‘hello‘]]; 
async execute() { 
this.context.stdout.write(‘This is my very own plugin &\n‘); 


у 

} 

return { 
commands: Г 

HelloWorldCommand, 

1, 

1: 

} 
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Plugins: hooks 


hooks: { 
afterAllInstalled(project) 4 
let descriptorCount = 0; 
for (const descriptor of project.storedDescriptors.values()) 
if (!structUtils.isVirtualDescriptor(descriptor)) 
descriptorCount += 1; 


let packageCount = 0; 
for (const pkg of project.storedPackages.values()) 
if CIstructUtils.isVirtualLocator(pkg)) 
packageCount += 1; 


console.log(‘This project contains ${descriptorCount} different descriptors 
that resolve to ${packageCount} packages‘); 
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Plug’n’Play 


строгий алгоритм разрешения зависимостей 
и установка без директории node modules 


зависимости сохраняются в .yarn/cache 
в виде гр-архивов 


в .рир.* хранится карта зависимостей 
с точными версиями по всем пакетам 


при старте node инжектится загрузчик модулей, 
работающий с .yarn/cache 
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Детерминизм 


доступ есть только к тому, 
что указано в package.json 


нет фантомных зависимостей 
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Фантомные зависимости? 


"dependencies": { Dependencies (1) М ГЭ node_modules import 15044 from "16-044", 
"is-even": "^1.0.0" ~ Е is-even 
} is-odd ана if (isOdd(n)) 4 /* */ } 2) 
15-еуеп 1.1.0 ~ РУ node modules import 15044 from "is-odd"; 
~ F is-even // Uncaught Error: Cannot find module 'is-odd' 


We are now dependency-free! ) | 
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Нет node modules 


не нужно дублироватБ вложенную структуру 
зависимостеи пакетов в фаиловои системе 


не нужно обновлять множество файлов при 
изменении зависимостеи 


м ГЭ поде тодие5 


~ Е рт 
O loose-envify 
(У rimraf ый =, уап 
~ & @babel => ~ © cache 
~ Е? runtime | | 
Е haia 1) @babel-runtime-npm-7.19.4-9f106cb4dd-66b7e3c13e.zip 
~ [27 esm 


(3 applyDecoratedDescriptor.js 
(А applyDecs.js 
D applyDecs2203.js 


[D arrayLikeToArray.js 
[D arrayWithHoles.js Frontend 
[D arrayWithoutHoles.js ep Conf 2022 


D assertThisinitialized.js 
D AsyncGenerator.js 


Zero-installs 


можно закоммитить кзш в репозиторий 


проект будет готов к работе 
сразу после чекаута 
без установки зависимостей 


особенно полезно при частом 
переключении между ветками 


удобнее делать частью PR 


не нужен кзш зависимостей для С! 


fc2022 Р feature ) 01% checkout main 
Switched to branch 'main' 
fc2022 Р main > yarn install 


> 


т у у у ү ү 


YNO000 : 
YNO000 : 
YNO000 : 
YNO000 : 
YNO000 : 
YNO000 : 
YNO000 : 


| Resolution step 
Completed 

| Fetch step 
Completed 

| Link step 
Completed 

Done іп 05 62ms 
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Поломки пакетов 


из-за строгости РиР пакеты с фантомными 
зависимостями могут ломаться 


недостающие зависимости можно добавить с 
помощью packageExtensions на уровне проекта 


известные поломки чинятся автоматически 
с помощью встроенного plugin-compat 


обычно проблем не возникает 
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x< 


VSCode 


Один редактор 
для всей команды 
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Editor SDK 


~/fc2022 У yarn dlx @yarnpkg/sdks vscode 


YNO000: г Generating SDKs inside .yarn/sdks 

YNO000 : / Eslint 

YNO000 : / Prettier 

YNO000 : / Typescript 

YNO000 : • 3 SDKs were skipped based on your root dependencies 
YNO000 : Completed 


ҮҮҮҮҮҮҮҮ м 


ҮМ0090: г Generating settings 
үмөөөө: | / Vscode (пеш  ) 
YNO000: ~ Completed 
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Работа с архивами 


ЕГ; 


ZipFS - а др file system 


Maël Nison | + 89,456 installs | ж ж Ж Ж (4) | Free 


Allows to easily inspect and modify files stored within zip archives. 


Install Trouble Installing? С 
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Настройки и использование 


коммитим в репозиторий 
полезные для всей команды настройки 
и рекомендованные расширения 


открываем в редакторе репозиторий целиком: 
ничего не тормозит, у всех работает одинаково, 
легко работать с любой частью кодовой базы 


у разработчика готовый к работе проект и 
настроенное окружение 
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Vite 


Бандлер и девсервер 


(French word for "quick", pronounced /vit/, like "veet") 
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Мо-рипа!е в дев-режиме 


каждый модуль трансформируетса 
по требованию с помощью ESBuild 


девсервер стартует моментально 


2 
22 У 


2 минуты 2 секунды 
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Если очень много модулей 


когда модулей действительно много, 

и все они нужны для отрисовки страницы, 
первая загрузка после старта девсервера 
может быть относительно долгой 


но, скорее всего, быстрее бандлера 


2k модулей = 5 секунд 
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Девсервер и бандлер 


не только девсервер, 
но и бандлер на основе Rollup 
с обцими настроиками и поддержкой плагинов 


совместим с Койир-плагинами, 
легко настраивается и расширяется 
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@vitejs/plugin-react 


добавлает поддержку JSX, 
в том числе новый automatic JSX runtime 


интегрирует React Fast Refresh 
во строенный HMR 
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Vite & воркспейсы 


имеет встроенную поддержку 
воркспейсов и РпР 


код из соседних воркспейсов 
обрабатывается так же, 
как и код приложения 


HMR & Fast Refresh работают 
в том числе в обших библиотеках 
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env и --тоде 


# .env.dev 


VITE_SOME_FEATURE=1 export function SomeFeature() 1 


return import.meta.env.VITE_SOME_FEATURE 
? <Implementation /> 

8 „епу.ргод : <Fallback /> 

VITE_SOME_FEATURE= 


уагп vite build --mode prod 
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Library Mode 


можно собирать библиотеки в любом формате 


export default { 


build: 1 
Lib: 4 
entry: "src/index.ts", 
formats: ["es", "cjs"] 
} 
} 


} 
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Prettier 


з 


72) 
| 


> © 


Prettier 


работает в редакторе кода 


запускается в CI для проверки 
форматированиа 


снимаєт все вопросы по оформлению кода 
проще использовать отдельно от линтера, 
чтобы не приходилось синхронизировать 


конфликтующие настройки 
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Настройки 


общий .prettierignore 
в корневой директории 


root = true в .editorconfig, 
чтобы избежать неожиданностей 


Editor: Format On Save 
Format a file on save. А formatter must be available, the file must not be 
saved after delay, and the editor must not be shutting down. 
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TypeScript 


Одна версия 15 


обеспечивает консистентность работы С 
зависимостями по исходному коду 


VSCode всё равно будет использовать 
одну версию 
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Project references 


изолируют части кодовой базы 
и позволяют используем разные опции, 
например, для node и browser 


связывают зависимые части кода, 
чтобы компилятор и редактор могли найти 
конфигурацию и код 


позволяют компилировать общие части 
один раз 
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Project references 


м РУ @fc2022 
м Е арр 

1) tsconfig.json 
~ Е library 

[4 tsconfig.json 


yarn tsc --build ./@fc2022/app 


@fc2022/app/tsconfig.json 


{ 


} 


"references": [ 
{"path": "../library"} 

iP 

"compilerOptions": 4 
"composite": true, 
"emitDeclarationOnly": true 


} 
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ESLint 


Конфигурация 


общий .eslintignore в корне 


.eslintrc.js с подключением плагинов 
и общими настройками 


не используем сторонние конфиги 
формируем собственный, 
только с Нужными нам правилами 


не включаем стилистические правила 
за форматирование отвечает prettier 
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TypeScript ESLint 


парсер добавляет поддержку синтаксиса 


плагин расширяет стандартные правила для 
работы с языковыми конструкциями 

и предоставляет набор правил 

с использованием информации о типах 
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TypeScript ESLint 


module.exports = { 


// подключаем плагин 
plugins: ["@typescript-eslint"], 


// настраиваем парсер 
parser: "@typescript-eslint/parser", 
parserOptions: 1 
// указываем пути до всех tsconfig 
project: "./xx/tsconfigx.json", 


// вклочаем экспериментальную опцию 
// дла поддержки project references 


EXPERIMENTAL_useSourceOfProjectReferenceRedirect: true, 
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Support for Project References #2094 


bradzacher opened this issue on May 25, 2020 - 27 comments - Fixed by #2669 


feat(typescript-estree): add flag 
EXPERIMENTAL _useSourceOfProjectReferenceRedirect #2669 


ја СВ bradzacher merged 3 commits into master from EXPERIMENTAL_useSourceOfProjectReferenceRedirect [О] оп Oct 15, 2020 
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BY 


Тести прование 


st & Vitest 


Jest 


гибко настраивается с помощью 
раннеров, окружений 
и трансформеров 


конфигурация частично повторяєт 
конфигурацию для сборки 


есть vite-jest  esbuild-jest 
вместо babel-jest 
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Vitest 


фреимворк для тестирования 
на основе Vite 


переиспользует существующую 
конфигурацию и легко донастраивается 


удобная альтернатива Jest 
для jsdom- и поде-тестов 


есть примеры е2е с использованием 
puppeteer и playwright 
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В итоге 


E © > 
05 > 


Простое и быстрое переключение 


#с2022 V feature-1 > git checkout main 

Switched to branch 'таїп! 

Your branch is behind 'огідіп/таіп' by 16 commits, and can Бе fast-forwarded. 
(use "git pull" to update your local branch) 

#с2022 У main [+] > git pull 

Updating a399130. . ссцЕЗаБ 

Fast-forward 

fc2022 Р main » git checkout -Ь feature-2 

Switched to а new branch 'feature-2' 

fc2022 И feature-2 У code . 


fc2022 V feature-2 > yarn workspace @fc2022/app dev 
VITE у3.1.8 ready іп 120 ms 


+ Local: http://localhost:5173/ 
> Network: use --host to expose 
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Готовое окружение 


общие настройки и инструменты 


легко работать над любой частью 
кодовой базы и переключаться 
между ними 
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стираем технические границы 
между проектами 
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7 


v Демо-репозиторий 


[Щи]; зн] 
2 


Гај чу 


github.com/swandir/fc2022 


+ 


оценить доклад 
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